<style scoped>
</style>

<template>
	<div class="vue-box">
			<!-- 参数栏 -->
			<div class="c-title" align="center"><h3>角色列表</h3></div>
			<el-form :inline="true" size="mini" @submit.native.prevent>
				<el-form-item label="角色名称：">
					<el-input v-model="rname"></el-input>
				</el-form-item>
				<el-form-item style="min-width: 0px;">
					<el-button type="primary" icon="el-icon-search" @click="f5(1)">查询</el-button>
				</el-form-item>
			</el-form>
			<!-- 数据列表 -->
			<el-table :data="dataList" size="mini" >
				<el-table-column label="编号" prop="rid"></el-table-column>
				<el-table-column label="角色名称">
          <template slot-scope="s">
            <el-input size="mini" v-model="s.row.rname"></el-input>
          </template>
        </el-table-column>
				<el-table-column label="操作" width="220px">
					<template slot-scope="s">
						<el-button type="text" size="mini" @click="update(s.row)">
              <span style="color: red">修改</span>
						</el-button>
						<el-button type="text" size="mini" @click="del(s.row.rid)">删除</el-button>
						<el-button type="text" size="mini" @click="menu_setup(s.row)">分配权限</el-button>
					</template>
				</el-table-column>
			</el-table>
		<!-- 添加 -->
		<div class="c-panel">
			<h4 class="c-title">添加一个</h4>
			<el-table :data="[{}]" size="mini" >
				<el-table-column label="名称">
					<template>
						<el-input size="mini" v-model="x.rname" style="width: 300px"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template>
						<el-button type="text" size="mini" @click="add">添加</el-button>
					</template>
				</el-table-column>
			</el-table>
    </div>
      <!-- 分页 -->
      <div class="page-box">
        <el-pagination background
                       layout="total, prev, pager, next, sizes, jumper"
                       :current-page.sync="pageNum"
                       :page-size.sync="pageSize"
                       :total="total"
                       :page-sizes="[2, 10, 20, 30, 40, 50, 100]"
                       @current-change="f5()"
                       @size-change="f5()">
        </el-pagination>
      </div>
		<!-- 设置权限  -->
		<menu-setup ref="menu-setup"></menu-setup>
	</div>
</template>

<script>
	import menuSetup from './menu-setup.vue';	 	// 设置权限
	export default {
		components: {
			menuSetup
		},
		data() {
			return {
        pageNum : 0,
        pageSize : 2,
        total : 0,
        rname : '',
        rid : '',
        x : {
          rname : ''
        },
				dataList: []	// 数据集合
			}
		},
		methods: {
			// 刷新
			f5: function(r){
         if(r == 1) {
          let regs = /^[\u0391-\uFFE5A-Za-z]+$/
          if(!regs.test(this.rname)) {
            return this.sa.alert('请输入中文查询!')
          }
        }
         this.sa.ajax('/role/find?pageNum='+this.pageNum+'&pageSize='+this.pageSize+'&rname='+this.rname,
        null,
        function (res) {
          this.dataList = res.data.list;
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
          this.total = res.data.total
        }.bind(this),
            {type : 'get'}
        )
			},
			// 修改
			update: function (data) {
        this.sa.ajax('/role/updateRole',{rid : data.rid, rname : data.rname},function () {
           this.f5()
          this.sa.ok('修改成功');
        }.bind(this))
			},
			// 删除
			del: function (rid) {
				if(rid == 1){
					return this.sa.alert('此角色是维持系统正常运行的重要角色，已被锁定，不可删除');
				}
				this.sa.confirm('是否删除，此操作不可撤销', function(){
					this.sa.ajax('/role/deleteRole',{rid: rid},function(){
              this.f5()
						this.sa.ok('删除成功');
					}.bind(this))
				}.bind(this))
			},
			// 添加
			add: function () {
        let regs = /^[\u0391-\uFFE5A-Za-z]+$/
          if(!regs.test(this.x.rname)) {
             return this.sa.alert('请输入中文!')
        }
				this.sa.ajax('/role/insertRole', {rname : this.x.rname}, function(){
					this.sa.alert('添加成功', function(){
              this.x.rname = ''
						this.f5()
					}.bind(this));
				}.bind(this))
			},
			// 修改菜单权限
			menu_setup: function(data){
				this.$refs['menu-setup'].show(data.rid, data.rname);
			}
		},
		created: function(){
			this.f5();
		}
	}
</script>
